<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 表单状态 & 尺寸速查</title>
    <!-- Bootstrap 3 CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
    <!-- 自定义焦点高亮（官方移除了 outline，这里用 box-shadow 补回） -->
    <style>
        .form-control:focus {
            outline: none;
            border-color: #66afe9;
            box-shadow: 0 0 8px rgba(102, 175, 233, .6);
        }
        /* 让演示间距更舒服 */
        .demo-row { margin: 15px 0; }
    </style>
</head>
<body>
<div class="container">
    <h2 class="page-header">🧩 表单控件状态 & 尺寸大全</h2>

    <!-- ========================================= -->
    <!-- 1. 焦点状态 -->
    <!-- ========================================= -->
    <div class="panel panel-default">
        <div class="panel-heading"><strong>1️⃣ 焦点状态（Focus）</strong></div>
        <div class="panel-body">
            <p>默认 outline 已被移除，<code>:focus</code> 通过 <code>box-shadow</code> 呈现蓝晕。</p>
            <div class="form-group">
                <label for="pwd">密码</label>
                <input type="password" id="pwd" class="form-control" placeholder="点击我查看焦点高亮">
            </div>
        </div>
    </div>

    <!-- ========================================= -->
    <!-- 2. 禁用 & 3. 只读 -->
    <!-- ========================================= -->
    <div class="panel panel-default">
        <div class="panel-heading"><strong>2️⃣ 禁用（disabled） vs 3️⃣ 只读（readonly）</strong></div>
        <div class="panel-body">
            <div class="row">
                <div class="col-sm-6">
                    <label>禁用输入框（不可焦点 / 不可修改）</label>
                    <input class="form-control" type="text" placeholder="Disabled input..." disabled>
                </div>
                <div class="col-sm-6">
                    <label>只读输入框（可焦点 / 不可修改）</label>
                    <input class="form-control" type="text" placeholder="Readonly input..." readonly>
                </div>
            </div>
        </div>
    </div>

    <!-- ========================================= -->
    <!-- 4. 校验状态 -->
    <!-- ========================================= -->
    <div class="panel panel-default">
        <div class="panel-heading"><strong>4️⃣ 校验状态（has-*）</strong></div>
        <div class="panel-body">
            <div class="form-group has-success">
                <label class="control-label" for="ok">Input with success</label>
                <input type="text" id="ok" class="form-control" aria-describedby="helpSuccess">
                <span id="helpSuccess" class="help-block">Great! 校验通过</span>
            </div>
            <div class="form-group has-warning">
                <label class="control-label" for="warn">Input with warning</label>
                <input type="text" id="warn" class="form-control">
            </div>
            <div class="form-group has-error">
                <label class="control-label" for="err">Input with error</label>
                <input type="text" id="err" class="form-control">
            </div>
        </div>
    </div>

    <!-- ========================================= -->
    <!-- 5. 控件尺寸 -->
    <!-- ========================================= -->
    <div class="panel panel-default">
        <div class="panel-heading"><strong>5️⃣ 控件尺寸（Height & Width）</strong></div>
        <div class="panel-body">
            <label>高度尺寸</label>
            <div class="demo-row">
                <input class="form-control input-lg" type="text" placeholder=".input-lg">
                <input class="form-control" type="text" placeholder="Default height">
                <input class="form-control input-sm" type="text" placeholder=".input-sm">
            </div>

            <label>宽度尺寸（栅格）</label>
            <div class="demo-row">
                <input class="form-control col-xs-2" type="text" placeholder="col-xs-2">
                <input class="form-control col-xs-6" type="text" placeholder="col-xs-6">
                <input class="form-control col-xs-12" type="text" placeholder="col-xs-12">
            </div>
        </div>
    </div>

</div> <!-- /.container -->
</body>
</html>
